<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BMI指数计算器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f8ff; /* 浅蓝色背景 */
            margin: 0;
            padding: 0;
            text-align: center;
        }

        h1 {
            color: #ff69b4; /* 粉色标题 */
            margin-top: 20px;
        }

        div.container {
            background-color: #ffe4e1; /* 粉色背景 */
            border-radius: 10px;
            padding: 20px;
            margin: 20px auto;
            width: 80%;
            max-width: 400px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        label {
            font-weight: bold;
            color: #ff1493; /* 深粉色 */
        }

        input[type="text"] {
            padding: 10px;
            border: 1px solid #ff69b4; /* 粉色边框 */
            border-radius: 5px;
            width: calc(100% - 24px);
            margin-bottom: 15px;
            font-size: 16px;
        }

        button {
            background-color: #add8e6; /* 浅蓝色按钮 */
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #87ceeb; /* 浅蓝色按钮悬停效果 */
        }

        #result {
            margin-top: 20px;
            font-size: 20px;
            color: #ff1493; /* 深粉色 */
        }

        .footer {
            margin-top: 20px;
            font-size: 14px;
            color: #666;
        }
    </style>
    <script>
        function kaishijisuan() {
            let w = document.querySelector("#weight").value;
            let h = document.querySelector("#height").value;

            // 输入验证
            if (w === '' ) {
                alert('体重不能为空');
                return;
            }
            if(h==""){
                alert('身高不能为空');
                return;
            }

            w = parseFloat(w);
            h = parseFloat(h);

            if (isNaN(w) || isNaN(h) || w < 3 || h < 50) {
                alert('请输入有效的数字，体重不能小于3kg，高度不能小于50cm，请仔细检查');
                return;
            }

            let bmi = w / ((h / 100) * (h / 100));
            let resultText = "";

            if (bmi < 18.5) {
                resultText = "过轻 " + bmi.toFixed(2) + " 您的体重过轻，请注意锻炼";
            } else if (bmi >= 18.5 && bmi < 25) {
                resultText = "正常 " + bmi.toFixed(2) + " 您的体重正常";
            } else if (bmi >= 25 && bmi < 30) {
                resultText = "过重 " + bmi.toFixed(2) + " 您的体重过重，请注意锻炼";
            } else if (bmi >= 30 && bmi < 35) {
                resultText = "肥胖 " + bmi.toFixed(2) + " 您的体重肥胖，请注意锻炼";
            } else {
                resultText = "严重肥胖 " + bmi.toFixed(2) + " 您的体重严重肥胖，请注意锻炼";
            }
            document.querySelector("#result").innerHTML = resultText;
        }

        function clearResult() {
            document.getElementById('weight').value = '';
            document.getElementById('height').value = '';
            document.getElementById('result').innerHTML = '测试结果：';
        }
    </script>
</head>

<body>
    <div class="container">
        <h1>BMI指数计算器</h1>
        <hr>
        <label for="weight">体重:</label>
        <input type="text" id="weight" placeholder="请输入体重"> kg
        <br>
        <label for="height">身高:</label>
        <input type="text" id="height" placeholder="请输入身高"> cm
        <br>
        <button onclick="kaishijisuan()">开始计算</button>
        <button onclick="clearResult()">重新计算</button>
        <div id="result">测试结果：</div>
        <div class="footer">©2024 版权由@Z-NM-0提供</div>
    </div>
</body>

</html>
